<template>
    <nav
        class="navbar docs-navbar is-spaced has-shadow"
        :class="{ 'is-primary is-transparent': light }"
    >
        <div class="container">
            <div class="navbar-brand">
                <router-link
                    to="/"
                    class="navbar-item"
                    title="Buefy: lightweight UI components for Vue.js based on Bulma"
                    active-class=""
                >
                    <img
                        v-if="light"
                        src="../assets/buefy-light.png"
                        alt="Buefy"
                    >
                    <img
                        v-else
                        src="../assets/buefy.png"
                        alt="Buefy"
                    >
                </router-link>

                <a
                    class="navbar-item"
                    href="https://github.com/buefy/buefy"
                    target="_blank"
                    title="Github"
                >
                    <b-icon icon="github" />
                </a>

                <a
                    class="navbar-item"
                    href="https://discord.buefy.org/"
                    target="_blank"
                    title="Discord"
                >
                    <b-icon icon="discord" />
                </a>

                <a
                    class="navbar-item"
                    href="https://x.com/buefycss"
                    target="_blank"
                    title="Twitter"
                >
                    <b-icon
                        pack="fa"
                        custom-class="fa-brands"
                        icon="x-twitter"
                    />
                </a>

                <span
                    class="navbar-burger burger"
                    :class="{ 'is-active': isMenuActive }"
                    @click="isMenuActive = !isMenuActive"
                >
                    <span />
                    <span />
                    <span />
                    <span />
                </span>
            </div>

            <div class="navbar-menu" :class="{ 'is-active': isMenuActive }">
                <div class="navbar-end">
                    <router-link
                        to="/"
                        exact
                        class="navbar-item"
                    >
                        Home
                    </router-link>

                    <router-link to="/documentation" class="navbar-item">
                        Documentation
                    </router-link>

                    <router-link to="/extensions" class="navbar-item">
                        Extensions
                    </router-link>

                    <router-link to="/expo" class="navbar-item">
                        Expo
                    </router-link>

                    <div class="navbar-item has-dropdown is-hoverable">
                        <div class="navbar-link">
                            Info
                        </div>

                        <div class="navbar-dropdown">
                            <strong class="navbar-item is-version">
                                <span class="has-text-primary">Buefy version</span>
                                <span class="has-text-grey">{{ version }}</span>
                            </strong>
                            <strong class="navbar-item is-version">
                                <span class="has-text-bulma">Bulma version</span>
                                <span class="has-text-grey">{{
                                    bulmaVersion
                                }}</span>
                            </strong>

                            <hr class="navbar-divider">
                            <div class="navbar-item">
                                <a
                                    href="https://github.com/buefy/buefy/releases"
                                    target="_blank"
                                    rel="noopener"
                                >
                                    Changelogs
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="navbar-item">
                        <b-icon
                            icon="white-balance-sunny"
                            size="is-small"
                            :class="{'is-warning': theme === 'light' }"
                        />
                        <b-switch
                            v-model="theme"
                            type="is-warning"
                            true-value="dark"
                            false-value="light"
                            size="is-small"
                            label="Theme"
                        />
                        <b-icon
                            icon="moon-waning-crescent"
                            size="is-small"
                            :class="{'is-primary': theme === 'dark' }"
                        />
                    </div>
                </div>
            </div>
        </div>
    </nav>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import { BIcon } from 'buefy'

import buefyPackage from '../../../../package.json'
import bulmaPackage from 'bulma/package.json'

export default defineComponent({
    components: { BIcon },
    emits: ['theme-changed'],
    props: {
        light: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            isMenuActive: false,
            version: buefyPackage.version,
            bulmaVersion: bulmaPackage.version
        }
    },
    computed: {
        theme: {
            get() {
                return this.light ? 'light' : 'dark'
            },
            set(newTheme: string) {
                this.$emit('theme-changed', newTheme === 'light')
            }
        }
    },
    watch: {
        isMenuActive() {
            this.toggleHtmlClip()
        }
    },
    methods: {
        closeMenu() {
            this.isMenuActive = false
        },
        toggleHtmlClip() {
            document.documentElement.classList.toggle(
                'is-clipped-touch',
                this.isMenuActive
            )
        }
    },
    mounted() {
        this.$eventHub.on('navigate', this.closeMenu)
    },

    beforeUnmount() {
        this.$eventHub.off('navigate', this.closeMenu)
    }
})
</script>
